<template>
  <div class="mainContainer">
    <el-tabs :tab-position="left" style="height: 100px">
      <el-tab-pane label="新建通知" style="text-align: center">
        <el-card class="tabcard">
          <el-form
            ref="notice"
            :model="notice"
            label-width="80px"
            class="noticeStyle"
          >
            <el-form-item label="主题">
              <el-input v-model="notice.title" style="width:400px;float:left"></el-input>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="notice.class" multiple placeholder="请选择" style="float:left">
                <el-option
                  v-for="item in classlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容">
              <el-input               placeholder="请输入内容"
type="textarea" v-model="notice.content"></el-input>
            </el-form-item>
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8282/exam/demo"
                :show-file-list="false"
                list-type="picture-card"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :on-preview="handlePreview"
              >
                <img
                  v-if="notice.dialogVisible"
                  :src="notice.imageUrl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">提交</el-button>
              <el-button type="primary">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="已发通知">
        <el-table
          :data="
            tableData.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column label="时间" prop="date"> </el-table-column>
          <el-table-column label="班级" prop="class"> </el-table-column>
          <el-table-column label="主题" prop="subject"> </el-table-column>
          <el-table-column align="right">
            <template slot="header">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >Delete</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="草稿箱">空</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classlist:[
        {label:'软件1班'},
        {label:'软件2班'},
        {label:'软件3班'},

      ],
      notice: {
        title: "",
        class: "",
        content: "",
        pic: "",
        // imageUrl: require('../../../assets/pic/1.jpg'),
        imageUrl: "",
        dialogVisible: true,
      },
      tableData: [
        {
          date: "2016-05-02",
          class: "计算机一班",
          subject: "大家记得完成本周六的复习任务",
          ifDetail: false,
        },
      ],
      search: "",
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.mainContainer {
  height: 100%;
  width: 100%;
  // background-image: url('../../../assets/pic/1.jpg');
  // background-size: 100% 100%;
}
.left {
  height: 100%;
  width: 30%;
  display: flex;
  // padding: 10px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
.right {
  height: 100%;
  width: 70%;
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
}
.noticeStyle {
  height: auto;
  width: auto;
  padding: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.a {
  height: 20%;
  width: 300px;
  // background-image: url('C:\\Users\\Cejay1314\\Pictures\\beauties\\1.jpg');
  background-size: 100% 100%;
}
.btn {
  height: 80px;
  width: 50%;
  font-size: 20px;
  margin-bottom: 40px;
}
.tabcard {
  text-align: center;
  margin: 30px;
  width: 90%;
}
</style>>